<template>
	<view class="container" :style="{ height: containerHeight + 'px' }">
		<scroll-view 
			class="chat_top_box" 
			scroll-y="true"
			:scroll-top="scrollTop"
			@scroll="onScroll"
		>
			<view class="chat_list">
				<view class="chat_bubble_box"
				:class="item.type === 'user'?'textRight' : ''"
				 v-for="(item,index) in chatListData"
				:key="index">
					<image v-if="item.type !== 'user'" class="avatar" :src="assets.aiAvatar" />
					<view :class="item.type === 'user' ? 'chat_bubble_right':'chat_bubble'">
						{{ item.message }}
					</view>
					<image v-if="item.type === 'user'" class="avatar" :src="assets.userAvatar" />
				</view>
				<view class="typing-indicator" v-if="isLoading">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
			</view>
		</scroll-view>
		<view class="chat_bottom_box">
			<view class="input-container">
				<textarea
					class="chat-input"
					v-model="keyword"
					placeholder="输入想问的问题"
					:disabled="isLoading"
					:adjust-position="adjustPosition"
					@keypress.enter.prevent="callDeepSeekAPI"
				></textarea>
				<view @click="callDeepSeekAPI" class="send-button" :class="{ 'disabled': isLoading || !keyword.trim() }">
					<image class="send-icon" :src="assets.sendIcon" />
				</view>
			</view>
		</view>
		<floating-menu @menuAction="handleMenuAction" />
	</view>
</template>

<script>
	import { callDeepSeekAPI } from '@/api/deepseek'; // 导入封装的 API 函数
	import assets from '@/common/assets.js'
	import FloatingMenu from '@/components/FloatingMenu.vue'
	export default {
		components: {
			FloatingMenu
		},
		data() {
			return {
				assets,  // 添加资源引用
				responseData: null,
				keyword: '',
				isLoading: false,
				chatListData: [{type:'user',message:'你好deepseek'},{type:'deepseek',message:'你好，我是 DeepSeek AI 助手，很高兴为您服务。'}],
				containerHeight: 0,
				keyboardHeight: 0,
				adjustPosition: false,
				currentStreamingMessage: '', // 添加新的数据属性用于存储正在流式显示的消息
				scrollTop: 0,
				// 添加历史消息数组
				messageHistory: [
					{role: "system", content: "你是 DeepSeek AI 助手，一个专业、友好的人工智能助手。"},
					{role: "user", content: "你好deepseek"},
					{role: "assistant", content: "你好，我是 DeepSeek AI 助手，很高兴为您服务。"}
				],
			}
		},
		created(){
			// this.callDeepSeekAPI()
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.containerHeight = systemInfo.windowHeight;
			
			// 设置系统导航栏标题
			uni.setNavigationBarTitle({
				title: 'DeepSeek Chat'
			});
			
			// 设置导航栏样式为白色背景
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			});
		},
		onReady() {
			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height;
				// 更新容器高度
				const systemInfo = uni.getSystemInfoSync();
				this.containerHeight = systemInfo.windowHeight - (res.height > 0 ? res.height : 0);
			})
		},
		methods: {
			// 添加格式化消息的方法
			formatMessage(message) {
				if (!message) return '';
				
				// 将文本转换为HTML
				let formattedText = message
					// 处理标题
					.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>') // 三级标题
					.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>') // 二级标题
					.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>') // 一级标题
					// 处理换行
					.replace(/\n/g, '<br>');
				
				return formattedText;
			},
			
			scrollToBottom() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.chat_list').boundingClientRect(res => {
					if (res) {
						this.scrollTop = res.height;
					}
				}).exec();
			},
			
			onScroll(e) {
				console.log('滚动事件：', e.detail);
			},
			
			async callDeepSeekAPI() {
				if (this.isLoading || !this.keyword.trim()) return;
				
				const currentMessage = this.keyword.trim();
				
				// 添加用户消息到历史
				this.messageHistory.push({
					role: "user",
					content: currentMessage
				});
				
				// 添加用户消息到显示列表
				this.chatListData.push({
					type: 'user',
					message: currentMessage
				});
				this.scrollToBottom();
				
				this.keyword = '';
				this.isLoading = true;
				
				// 添加AI空消息
				const aiMessageIndex = this.chatListData.length;
				this.chatListData.push({
					type: 'deepseek',
					message: ''
				});
				this.scrollToBottom();
				
				try {
					const requestTask = uni.request({
						url: 'https://api.deepseek.com/v1/chat/completions',
						method: 'POST',
						header: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer sk-a6418c2ffba64b4fbb6675c711d375d8',
							'Accept': 'text/event-stream'
						},
						data: {
							model: "deepseek-chat",
							messages: this.messageHistory, // 发送完整的对话历史
							temperature: 0.7,
							max_tokens: 1000,
							stream: true
						},
						enableChunked: true,
						enableStream: true,
						success: (res) => {
							console.log('请求成功:', res);
							this.scrollToBottom();
						},
						fail: (err) => {
							console.error('请求失败:', err);
							this.$set(
								this.chatListData[aiMessageIndex],
								'message',
								`抱歉，服务暂时不可用，请稍后再试。\n错误信息：${err.errMsg}`
							);
							this.scrollToBottom();
						},
						complete: () => {
							this.isLoading = false;
							this.scrollToBottom();
						}
					});

					// 监听数据块
					requestTask.onChunkReceived((response) => {
						try {
							const chunk = new TextDecoder().decode(response.data);
							const lines = chunk.split('\n');
							for (const line of lines) {
								if (line.trim() === '') continue;
								if (line.startsWith('data: ')) {
									const jsonStr = line.slice(6);
									if (jsonStr.trim() === '[DONE]') continue;
									
									try {
										const data = JSON.parse(jsonStr);
										if (data.choices && data.choices[0].delta && data.choices[0].delta.content) {
											const content = data.choices[0].delta.content;
											// 更新显示的消息
											this.$set(
												this.chatListData[aiMessageIndex],
												'message',
												this.chatListData[aiMessageIndex].message + content
											);
											
											// 如果是第一个数据块，将 AI 回复添加到历史记录
											if (!this.messageHistory[this.messageHistory.length - 1]?.role === 'assistant') {
												this.messageHistory.push({
													role: 'assistant',
													content: ''
												});
											}
											
											// 更新历史记录中的最后一条消息
											const lastMessage = this.messageHistory[this.messageHistory.length - 1];
											lastMessage.content += content;
											
											this.scrollToBottom();
										}
									} catch (e) {
										console.error('解析JSON数据出错:', e, jsonStr);
									}
								}
							}
						} catch (e) {
							console.error('处理数据块出错:', e);
						}
					});
				} catch (error) {
					console.error('API请求错误:', error);
					this.$set(
						this.chatListData[aiMessageIndex],
						'message',
						`抱歉，服务暂时不可用，请稍后再试。\n错误信息：${error.message}`
					);
					this.isLoading = false;
					this.scrollToBottom();
				}
			},
			handleMenuAction(action) {
				switch(action) {
					case 'history':
						// 处理聊天记录
						console.log('打开聊天记录')
						break
					case 'profile':
						// 处理个人中心
						console.log('打开个人中心')
						break
					case 'settings':
						// 处理设置
						console.log('打开设置')
						break
				}
			}
		},
		// 添加一个监听聊天列表变化的 watch
		watch: {
			chatListData: {
				handler() {
					this.$nextTick(() => {
						this.scrollToBottom();
					});
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}
	
	.container {
		background: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	
	.chat_top_box {
		flex: 1;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		position: relative;
		background: #f8f8f8;
	}
	
	.chat_list {
		padding: 10px 0;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.chat_bubble_box {
		display: flex;
		align-items: flex-start;
		margin: 16px 0;
		padding: 0 16px;
		
		&.textRight {
			justify-content: flex-end;
			
			.chat_bubble_right {
				margin-right: 8px;
				margin-left: 0;
			}
			
			.avatar {
				margin: 0;
			}
		}
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.chat_bottom_box {
		position: relative;
		z-index: 100;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		padding: 10px 16px;
	}
	
	.input-container {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 16px;
		padding: 4px 8px;
		transition: all 0.3s ease;
	}
	
	.chat-input {
		flex: 1;
		min-height: 16px;
		max-height: 80px;
		font-size: 14px;
		line-height: 18px;
		padding: 4px 0;
		background: transparent;
		border: none;
	}
	
	.send-button {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #007AFF;
		border-radius: 14px;
		margin-left: 6px;
		
		&.disabled {
			background: #ccc;
			opacity: 0.7;
		}
	}
	
	.send-icon {
		width: 16px;
		height: 16px;
	}
	
	.chat_bubble {
		max-width: 70%;
		background: #fff;
		border-radius: 12px;
		padding: 12px 16px;
		font-size: 14px;
		line-height: 1.6;
		color: #333;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-left: 8px;
		white-space: pre-wrap;
		word-wrap: break-word;
		
		::v-deep {
			h1, h2, h3 {
				margin: 0;
				font-weight: 600;
				line-height: 1.4;
			}
			
			h1 {
				font-size: 18px;
				margin-bottom: 8px;
			}
			
			h2 {
				font-size: 16px;
				margin-bottom: 6px;
			}
			
			h3 {
				font-size: 15px;
				margin-bottom: 4px;
			}
			
			br {
				display: block;
				margin: 8px 0;
			}
		}
	}
	
	.chat_bubble_right {
		max-width: 70%;
		background: #007AFF;
		color: #fff;
		border-radius: 12px;
		padding: 12px 16px;
		font-size: 14px;
		line-height: 1.4;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	
	.avatar {
		width: 32px;
		height: 32px;
		border-radius: 16px;
		flex-shrink: 0;
	}
	
	.typing-indicator {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		margin-left: 48px;
		
		.dot {
			width: 8px;
			height: 8px;
			background: #999;
			border-radius: 50%;
			margin: 0 2px;
			animation: typing 1s infinite ease-in-out;
			
			&:nth-child(1) { animation-delay: 0.2s; }
			&:nth-child(2) { animation-delay: 0.3s; }
			&:nth-child(3) { animation-delay: 0.4s; }
		}
	}
	
	@keyframes typing {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-4px); }
	}
</style>
